<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../../vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-on的修饰符
      prevent(preventDefault)、stop(阻止冒泡传播 stopPropgation)、caputure、self、once、enter -->
      <div
        style="width: 200px; height: 200px; border: 1px solid black"
        @click="outer"
      >
        outer
        <div
          style="
            width: 150px;
            height: 150px;
            border: 1px solid black;
            margin-left: 25px;
          "
          @click.capture.stop="inner"
        >
          <!-- .capture是在捕获阶段执行函数，
            正常的点击最内层的content时，由于冒泡，执行顺序为content->inner->outer,
            而给inner的点击事件加上capture时，执行顺序为inner->content->outer
          
            修饰符可以串联，再给inner加上stop修饰符后，点击最内部也只会弹出inner，因为此时的inner在捕获阶段执行后就停止传播，就不会传播到content,也不会又后面的冒泡阶段(事件的三个阶段：捕获阶段，目标阶段，冒泡阶段)
          -->
          inner
          <div
            style="
              width: 100px;
              height: 100px;
              border: 1px solid black;
              margin-left: 25px;
            "
            @click="con"
          >
            content
          </div>
        </div>
      </div>

      <form action="">
        <!-- 阻止点击按钮时页面自动刷新的行为 -->
        <button @click.prevent="">提交</button>
      </form>

      <div
        @click.self="outer"
        style="
          width: 150px;
          height: 150px;
          border: 1px solid black;
          margin-left: 25px;
        "
      >
        <!-- 加上self修饰符，函数的事件只能由自身触发，即事件不是从内部元素触发的 -->
        outer
        <div
          @click="con"
          style="
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin-left: 25px;
          "
        >
          content
        </div>
      </div>

      <button @click.once="con">点击只执行一次</button>

      <!-- 按下enter键执行con函数 -->
      <input type="text" @keyup.enter="con" />
    </div>
    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          // 事件函数不要写在data中，因为data中的this指向window
          return {
            count: 10,
            num: 10,
          };
        },
        methods: {
          outer() {
            alert('outer');
          },
          inner() {
            alert('inner');
          },
          con() {
            alert('content');
          },
        },
      });
    </script>
  </body>
</html>
